
import { CloseOutlined } from '@ant-design/icons';
import { Button, Descriptions, Drawer, Spin, Switch } from 'antd';

import hooks from '../../hooks';
import MenuTreeSearch from '../MenuTreeSearch';

export default () => {
  const {
    editHooks: { modal, onClose, menuTreeHooks },
  } = hooks.useContainer();
  const { roleTree, checkedKeys, setCheckedKeys } = menuTreeHooks;
  const { data } = modal;


  return (
    <Drawer
      title="角色详情"
      width={600}
      destroyOnClose
      open={modal.type === 'detail' && modal.open}
      footer={<Button onClick={onClose}>关闭</Button>}
      extra={<CloseOutlined onClick={onClose} />}
      closable={false}
      onClose={onClose}
    >
      {data ? (
        <>
          <Descriptions title="基本信息" layout="horizontal" column={1}>
            <Descriptions.Item label="角色名称" style={{ width: '4rem' }}>
              {data?.name}
            </Descriptions.Item>
            <Descriptions.Item label="角色描述">{data?.description || '-'}</Descriptions.Item>
            <Descriptions.Item label="角色状态">
              <Switch disabled={modal.type === 'detail'} checked={data?.status === 0} />
            </Descriptions.Item>
          </Descriptions>
          <div style={{ margin: '10px 0' }}>
            <div
              style={{
                color: 'rgba(0,0,0,0.85)',
                fontSize: '16px',
                fontWeight: 'bold',
                marginBottom: '20px',
              }}
            >
              权限配置
            </div>
            <MenuTreeSearch
              data={roleTree.data}
              checkedKeys={checkedKeys}
              setCheckedKeys={setCheckedKeys}
              disabled
              showSearch={false}
              selectable={false}
            />
          </div>
          {/* <Descriptions layout="horizontal" column={1}>
            <Descriptions.Item label="默认页面">{menuName}</Descriptions.Item>
          </Descriptions> */}
        </>
      ) : (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '100px 0' }}>
          <Spin />
        </div>
      )}
    </Drawer>
  );
};
